import React,{Component} from 'react';
import './App.css';
import 'antd/dist/antd.css';
import { Button ,Table,Rate} from 'antd';

import axios from 'axios'



class App extends Component {
    state = {
        list:[],
        pagenum:1,
        limit:2,
        total:0
    }
    componentDidMount(){
       this.getList();
    }

    getList = () => {
        let {pagenum,limit} = this.state;
        let start = (pagenum-1)*limit;
        axios.get('/bookslist',{params:{start,limit}}).then(res => {
            console.log(res)
            if(res.data.code === 1){
                this.setState({
                    list:res.data.data,
                    total:res.data.total
                })
            }else{
                alert(res.data.msg)
            }
        })
    }
    render(){
        let {list,total} = this.state;
        const columns = [
            {
              title: '创建时间',
              dataIndex: 'create_time',
              key: 'create_time'
            },
            {
              title: '标题',
              dataIndex: 'title',
              key: 'title',
            },
            {
              title: '作者',
              dataIndex: 'author',
              key: 'author',
            },
            {
              title: '重要性',
              key: 'important',
              render:(text) => (
                <Rate count={text.important}></Rate>
                )
            },
            {
              title: '阅读数',
              key: 'readnum',
              dataIndex: 'readnum'
            },
            {
              title: '状态',
              key: 'status',
              dataIndex: 'status'
            },
            {
              title: 'Action',
              key: 'action',
              render: (text,record) => (
                <span>
                  <a>Invite {record.name}</a>
                  <a onClick={() => {this.del(text.id)}}>Delete</a>
                </span>
              ),
            },
          ];
        return (
            <div className="App">
                <Button type="primary">添加</Button>
                <Table columns={columns} dataSource={list} rowKey="id" pagination={
                    {
                        total,
                        pageSize:2,
                        onChange:this.change
                    }
                }/>
            </div>
          );
    } 

    change = (page) => {
        console.log(page)
        this.setState({
            pagenum:page
        },() => {
            this.getList();
        })
    }

    del = (id) => {
        axios.get('/del',{headers:{'egg-identity':'admin'},params:{id}}).then(res => {
            console.log(res);
            if(res.data.code === 1){
                this.getList();
            }else{
                alert(res.data.msg)
            }
        })
    }
}

export default App;
